import React, { Component } from 'react';
import { TextInput, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, Keyboard, Platform } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import { TabBarImage, TabBarAnimationImage } from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { statusBarHeight, titleHeight, width, unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import { SubmitButton8, AddButton, ReduceButton, SubmitButton9, SubmitButton10, SubmitButton4, SubmitButton13, SubmitButton1 } from '../components/Button';
import { api_member_cart_get_list, api_order_workorder_assessOrder } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import MyListView from '../components/MyListView';
import { DeleteTextView } from '../components/MyTextView';
import { CommonModal2, BottomPayModal, CommonModal3, BottomReasonModal, MediaPickerModal, LoadingAndPorgressModal } from '../components/Modal';
import { MeItem, IconItem, OrderDetailHeaderItem, Item3, RatingItem, ChooseMediaItem } from '../components/Item';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import CommonUtil from '../constants/CommonUtil';
import { Rating, AirbnbRating } from 'react-native-elements';
import { uploadFile } from '../constants/UpLoadHelper';
import { UploadModule } from '../constants/CustomModules';
import { show } from '../constants/Toast';

export default class EvaluateServiceScreen extends Component {
    constructor(props) {
        super(props)

        this.no = this.props.navigation.getParam('no', '0')

        this.state = {
            content: '',

            ImageList: [],
            videoInfo: {},
            mediaType: 0,//1表示图片，2表示视频
            progress: '0',

            quality: 2.5,
            speed: 2.5,
            attitude: 2.5,
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {

        })
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF7 }}>
                <MyHeader title='评价服务商' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{}}>
                    <View style={{ width: width, height: 133 * unitWidth, backgroundColor: Colors.white, paddingHorizontal: 15 * unitWidth }}>
                        <Text style={{ color: Colors.black, fontSize: 15, marginVertical: 10 * unitWidth }}>给服务商打个分</Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: Colors.color99, fontSize: 16 }}>完成质量</Text>
                            <Rating
                                style={{ marginLeft: 10 * unitWidth }}
                                startingValue={this.state.quality}
                                imageSize={16}
                                onFinishRating={(rating) => {
                                    this.setState({
                                        quality: rating
                                    })
                                }}
                            />
                        </View>
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 * unitWidth }}>
                            <Text style={{ color: Colors.color99, fontSize: 16 }}>完成速度</Text>
                            <Rating
                                style={{ marginLeft: 10 * unitWidth }}
                                startingValue={this.state.speed}
                                imageSize={16}
                                onFinishRating={(rating) => {
                                    this.setState({
                                        speed: rating
                                    })
                                }}
                            />
                        </View>
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 * unitWidth }}>
                            <Text style={{ color: Colors.color99, fontSize: 16 }}>服务态度</Text>
                            <Rating
                                style={{ marginLeft: 10 * unitWidth }}
                                startingValue={this.state.attitude}
                                imageSize={16}
                                onFinishRating={(rating) => {
                                    this.setState({
                                        attitude: rating
                                    })
                                }}
                            />
                        </View>
                    </View>
                    <View style={{ width: width, minHeight: 284 * unitWidth, backgroundColor: Colors.white, paddingHorizontal: 15 * unitWidth, marginTop: 5 * unitWidth }}>
                        <Text style={{ color: Colors.black, fontSize: 15, marginVertical: 14 * unitWidth }}>更多评价</Text>
                        <View style={{ width: 335 * unitWidth, minHeight: 155 * unitWidth, backgroundColor: Colors.colorEF, paddingHorizontal: 10 * unitWidth }}>
                            <TextInput
                                style={{
                                    fontSize: 14,
                                    textAlign: 'left'
                                }}
                                onChangeText={(text) => {
                                    this.setState({
                                        content: text
                                    })
                                }}
                                multiline={true}
                                maxLength={800}
                                placeholder='请输入您对服务商的评价吧...'
                                value={this.state.content}
                            />
                        </View>
                        <ChooseMediaItem
                            onPress={() => {
                                Keyboard.dismiss();
                                this.refs.MediaPickerModal.showModal()
                            }}
                            ImageList={this.state.ImageList}
                            mediaType={this.state.mediaType}
                            videoUrl={Platform.OS == 'android' ? this.state.videoInfo.path : this.state.videoInfo.uri}
                            style={{}}
                            onDeletePress={(index) => {
                                this.state.ImageList.splice(index, 1);
                                this.setState({
                                    ImageList: this.state.ImageList
                                })
                            }}
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    ImageList: [...this.state.ImageList, ...selectedPhotos]
                                })
                            }} />
                    </View>
                    <SubmitButton1 style={{ alignSelf: 'center', marginTop: 30 * unitWidth }} text='提交' onPress={() => {
                        this.upload()
                    }} />
                </ScrollView>
                <MediaPickerModal ref='MediaPickerModal'
                    onChooseVideoClick={this.onChooseVideoClick.bind(this)} onChooseImageClick={this.onChooseImageClick.bind(this)}
                    chooseVideoSuccess={this.chooseVideoSuccess.bind(this)} chooseImageSuccess={this.chooseImageSuccess.bind(this)} />
                <LoadingAndPorgressModal ref='LoadingAndPorgressModal' progress={this.state.progress} />
            </View>
        )
    }

    onChooseVideoClick() {
        this.setState({
            ImageList: [],
        })
    }

    onChooseImageClick() {
        this.setState({
            videoInfo: {},
        })
    }

    chooseImageSuccess(response) {
        this.setState({
            ImageList: response,
            mediaType: 1,
        })
    }

    chooseVideoSuccess(response) {
        console.log('视频路径', response.path);
        this.setState({
            videoInfo: response,
            mediaType: 2,
        })
    }

    upload() {
        if (this.state.mediaType == 1 && this.state.ImageList.length > 0) {
            this.refs.LoadingAndPorgressModal.showModal();
            uploadFile(this.state.ImageList, (text) => {
                this.setState({
                    progress: text
                })
            }, {
                success: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();

                    let path = []
                    for (let item of response.files) {
                        path.push(item.url)
                    }
                    this.submit(path);
                },
                fail: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    show('上传失败')
                }
            })
        } else if (this.state.mediaType == 2 && this.state.videoInfo.path) {
            console.log('视频路径', this.state.videoInfo.path);
            this.refs.LoadingAndPorgressModal.showModal();
            UploadModule.uploadVideo(this.state.videoInfo.path, (path) => {
                this.refs.LoadingAndPorgressModal.hideModal();
                this.submit([path]);
            }, (text) => {
                this.refs.LoadingAndPorgressModal.hideModal();
                show(text)
            })
        } else {
            this.submit();
        }
    }

    submit(path) {
        let params = {
            out_trade_no: this.no,
            quality: this.state.quality,
            speed: this.state.speed,
            attitude: this.state.attitude,
            content: this.state.content,
            is_img: this.state.mediaType
        }
        if (path) {
            params['imgOrVideo'] = JSON.stringify(path)
        }
        postFetch(api_order_workorder_assessOrder, params, {
            success: (response) => {
                show(response.result.message);
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}